<template>
  <div class="announcement">
    <!--  顶部导航  -->
    <HeaderSimple
      page="userInformation"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <div class="section">
      <div
        class="announcement_list"
        v-for="(item, index) in announcementList"
        :key="index"
        @click="toAnnouncementDetail(item.id)"
      >
        <h1 class="announcement_title">{{ item.title }}</h1>
        <p class="announcement_info">
          {{ item.nickname }}
          <span style="color: #888888;">{{ item.updatetime }}</span>
        </p>
        <p class="announcement_content">{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderSimple from "@/components/HeaderSimple";
export default {
  name: "announcement",
  components: {
    HeaderSimple
  },
  data() {
    return {
      announcementList: []
    };
  },
  created() {
    this.title = this.$route.meta.title;
    this.getAnnouncementList()
  },
  methods: {
    // 获取公告列表
    getAnnouncementList() {
      this.$axios.get('/api/index/announcementList').then(res => {
        console.log(res)
        if (res.data.code === 1) {
          this.announcementList = res.data.data
        }
      })
    },
    // 公告详情
    toAnnouncementDetail(id) {
      console.log(123);
      this.$router.push({path: '/announcementDetail', query: {id: id}});
    },
    // 返回
    onClickLeft() {
      this.$router.push('/index')
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.announcement {
  width: 100%;
  .section {
    padding: 30px;
    .announcement_list {
      width: 100%;
      height: 260px;
      margin-top: 30px;
      background: rgba(255, 255, 255, 1);
      border-radius: 12px;
      padding: 38px 32px;
      .announcement_title {
        font-size: 42px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 55px;
      }
      .announcement_info {
        /*margin-top: 8px;*/
        font-size: 24px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: rgba(75, 91, 141, 1);
        line-height: 55px;
      }
      .announcement_content {
        /*margin-top: 10px;*/
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 36px;
        width: 624px;
        height: 72px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
}
</style>
